<template>
  <div>
    <div style="height: 310px">
      <div style="height: 300px" class="marginT10">
        <!-- 检查规则和通知配置 -->
        <section style="height: 300px;">
          <el-form :ref="'section3Form'+index" :model="item" v-for="(item,index) in checkRuleDTOList" :key="index"
                   label-width="100px"
                   size="small">
            <el-row :gutter="5">
              <el-col :span="5" class="col">
                <el-form-item label="检查名称" prop="ruleName"
                              :rules="[{required: true, message: '请输入信息', trigger: 'blur'},{min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}]">
                  <el-input v-model="item.ruleName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" class="col">
                <el-form-item label="检查方式" prop="implServiceName"
                              :rules="{required: true, message: '请输入信息', trigger: 'blur'}">
                  <el-select v-model="item.implServiceName" placeholder="请选择检查方式">
                    <el-option v-for="(dataItem,dataIndex) in checkConfigList" :key="dataIndex"
                               :label="dataItem.checkName"
                               :value="dataItem.implServiceName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="col">
                <el-form-item label="检查期望值" prop="expectCheckData"
                              :rules="{required: true, message: '请输入信息', trigger: 'blur'}">
                  <el-input v-model="item.expectCheckData" placeHolder="多个值以逗号隔开，文本不需要引号，单列规则直接写规则采集值使用value占位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <div class="floatR">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini"
                             @click="removeCheckConfigHandler(item)"></el-button>
                  <el-button type="primary" icon="el-icon-message" circle
                             size="mini"
                             @click="msgConfigAddHandler(item)"></el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>

          <div class="floatR">
            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addCheckConfigHandler"></el-button>
          </div>
        </section>
      </div>
      <div style="clear: both"></div>
      <section class="floatR">
        <el-button type="primary" size="small" @click="completedHandler" v-if="action==='update'">{{actionName}}
        </el-button>
      </section>
    </div>
    <el-dialog
      title="消息提示"
      :visible.sync="msgConfigDialogVisible"
      width="40%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="msgForm" :rules="msgFormRules" :model="msgRuleDTO" size="small" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="规则名称" prop="ruleName">
              <el-input v-model="msgRuleDTO.ruleName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-dialog">
            <el-form-item label="通知方式" prop="msgType">
              <el-select v-model="msgRuleDTO.msgType" placeholder="请选择通知方式" @change="msgTypeChangeHandler">
                <el-option v-for="(dataItem,dataIndex) in msgTypeList" :key="dataIndex"
                           :label="dataItem.name"
                           :value="dataItem.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-dialog">
            <el-form-item label="接收人">
              <el-input v-model="msgRuleDTO.msgReceiver"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-dialog">
            <el-form-item label="可用消息参数">
              <el-tag size="mini" v-for="(item,index) in msgParamList" :key="index" style="margin-right: 3px"
                      @click="addMsgParamHandler(item)">{{item}}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-dialog">
            <el-form-item label="消息模板" prop="msgTemplate">
              <el-input type="textarea" v-model="msgRuleDTO.msgTemplate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form :ref="'msgForm'+index" :model="item" v-for="(item,index) in msgRuleDTO.msgRuleDetailConfigList"
                 :key="index" size="small" label-width="110px">
          <el-row>
            <el-col :span="24" class="col-dialog">
              <el-form-item :label="item.configName" prop="configValue"
                            :rules="{required: true, message: '请输入信息', trigger: 'blur'}">
                <el-input v-model="item.configValue" :placeholder="item.description"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="msgConfigSaveHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import {
    listCheckConfig,
    listMsgRuleDetailConfig,
    listMsgType,
    listMsgParam
  } from '@/api/config/index'
  import {
    getAcquisitionRule,
    listCheckRule,
    updateCheckRule,
    updateMsgRule
  } from '@/api/rule/index'

  export default {
    props: {
      executeRuleId:{
        type: Number,
        default: null
      },
      taskDTO: {
        type: Object,
        default: null
      },
      action: {
        type: String,
        default: 'update'
      }
    },
    data() {
      return {
        actionName: '修改',
        checkConfigList: [],
        msgTypeList: [],
        msgParamList: [],
        msgConfigDialogVisible: false,
        acquisitionRuleDTO:
          {
            id: null,
            ruleName: null,
            acquisitionExpression: "",
            dbConfigId: null,
            acquisitionType: null,
            valueType: null,
            valueFormat: null,
            remark: null
          },
        checkRuleDTOList: [],
        checkRuleDTO: {
          ruleName: null,
          expectCheckData: null,
          checkName: null,
          implServiceName: null,
          remark: null,
          msgRuleDTO: {
            ruleName: null,
            msgType: null,
            msgReceiver: null,
            msgTemplate: null,
            remark: null,
            msgRuleDetailConfigList: []
          }
        },
        msgRuleDTO: {},
        msgFormRules: {
          ruleName: [
            {required: true, message: '请输入信息', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          msgType: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ],
          msgTemplate: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init() {
        if (this.action === 'add') {
          this.actionName = '添加';
          this.taskDTO.checkRuleDTOList = this.checkRuleDTOList;
          listCheckConfig({
            acquisitionType: this.taskDTO.acquisitionRuleDTO.acquisitionType,
            dataValueType: this.taskDTO.acquisitionRuleDTO.valueType
          }).then(response => {
            this.checkConfigList = response.data;
          });
          return;
        }
        getAcquisitionRule({
          executeRuleId: this.executeRuleId
        }).then(response => {
          this.acquisitionRuleDTO = response.data;
          listCheckConfig({
            acquisitionType: this.acquisitionRuleDTO.acquisitionType,
            dataValueType: this.acquisitionRuleDTO.valueType
          }).then(response => {
            this.checkConfigList = response.data;
          });
        });
        listCheckRule({
          executeRuleId: this.executeRuleId
        }).then(response => {
          this.checkRuleDTOList = response.data;
        });
      },
      // 添加检查规则事件
      addCheckConfigHandler() {
        let checkRuleItem = JSON.parse(JSON.stringify(this.checkRuleDTO));
        this.checkRuleDTOList.push(checkRuleItem);
      },
      // 移除检查规则事件
      removeCheckConfigHandler(item) {
        this.$confirm('是否移除当前检查规则', '移除检查规则', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '放弃删除'
        }).then(() => {
          this.checkRuleDTOList.remove(item);
        }).catch(action => {
        });
      },
      // 消息规则添加事件
      msgConfigAddHandler(checkRuleDTO) {
        this.msgRuleDTO = checkRuleDTO.msgRuleDTO;
        listMsgType().then(response => {
          this.msgTypeList = response.data;
        });
        listMsgParam().then(response => {
          this.msgParamList = response.data;
        });
        this.msgConfigDialogVisible = true;
      },
      // 添加消息参数到消息模板事件
      addMsgParamHandler(val) {
        if (this.msgRuleDTO.msgTemplate == null) {
          this.msgRuleDTO.msgTemplate = '';
        }
        this.msgRuleDTO.msgTemplate += '${' + val + '}';
      },
      // 消息配置保存事件
      msgConfigSaveHandler() {
        let checkResult = true;
        this.$refs['msgForm'].validate((valid) => {
          if (!valid) {
            checkResult = false;
          }
        });
        this.msgRuleDTO.msgRuleDetailConfigList.forEach((item, index) => {
          let msgName = 'msgForm' + index;
          this.$refs[msgName][0].validate((valid) => {
            if (!valid) {
              checkResult = false;
            }
          });
        });
        if (!checkResult) {
          return;
        }
        // 新添加消息规则则关闭窗口等待检查规则提交一并保存
        if (this.msgRuleDTO.id == null) {
          this.msgConfigDialogVisible = false;
          return;
        }
        updateMsgRule({msgRuleDTO: this.msgRuleDTO}).then(response => {
          if (response.status === 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.msgConfigDialogVisible = false;
          }
        });
      },
      // 消息类型变更事件
      msgTypeChangeHandler(val) {
        listMsgRuleDetailConfig({msgType: val}).then(response => {
          this.msgRuleDTO.msgRuleDetailConfigList = response.data;
        });
      },
      // 完成事件
      completedHandler() {
        let checkResult = true;
        this.checkRuleDTOList.forEach((item, index) => {
          let form3Name = 'section3Form' + index;
          this.$refs[form3Name][0].validate((valid) => {
            if (!valid) {
              checkResult = false;
            }
          });
        });
        if (!checkResult) {
          return;
        }
        if (this.action === 'add') {
          return true;
        } else {
          updateCheckRule({
            executeRuleId: this.executeRuleId,
            acquisitionRuleId: this.acquisitionRuleDTO.id,
            checkRuleDTOList: this.checkRuleDTOList
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.$emit("closeUpdateCheckDialogHandler");
            }
          });
        }
      }
    },
    created() {
      this.init();
    },
    computed: {},
    components: {}
  }
</script>

<style scoped>
  .col {
    height: 40px;
  }

  .col-dialog {
    margin-top: 20px;
  }

  .col-description {
    height: 70px;
  }

  .col-textarea {
    height: 70px;
  }
</style>
